<template>
	<div class="app">
		<myNavbar title="修改资料"></myNavbar>
		<div class="mine-list">
			<div class="mine-list-item-head bb">
				<text class="editMember-label">头像</text>
				<div class="flex">
					<div style="border-radius: 100px;">
						<image  :src="memberInfo.avatar" style="height: 80px;width: 80px;" />
					</div>
				</div>
				<!-- <button class="mine-getUserInfo-button" open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button> -->
			</div>
			<div class="editMember-list-item bb">
				<text class="editMember-label">会员名称</text>
				<div class="list-right">
					<input class="editMember-list-item-input" placeholder="请输入会员名称" :accept="right" v-model="memberInfo.name" />
					<text class="title2">&#xe61f;</text>
				</div>
			</div>
			<div class="editMember-list-item bb">
				<text class="editMember-label">手机号码</text>
				<text class="contact">{{memberInfo.mobile}}</text>
			</div>
			<div class="editMember-list-item bb" @click="showVipSelect">
				<text class="editMember-label">会员等级</text>
				<div class="list-right">
					<text class="contact">{{memberInfo.vipName}}</text>
					<text class="title2">&#xe61f;</text>
				</div>
			</div>
			<div class="editMember-list-item bb"  @click="showTypeSelect">
				<text class="editMember-label">会员类型</text>
				<div class="list-right">
					<text class="contact">{{memberInfo.memberType==0? '个人': '法人企业'}}</text>
					<text class="title2">&#xe61f;</text>
				</div>
			</div>
			<div class="editMember-list-item bb">
				<text class="editMember-label">推荐人</text>
				<text class="contact">{{ promoterName }}</text>
			</div>
			<div class="editMember-list-item">
				<text class="editMember-label">是否绑定</text>
				<text class="contact">{{ isNull(memberInfo.userid)? '未绑定': '已绑定' }}</text>
			</div>
		</div>
		<div class="btn addressEdit-list-submit" @click="submit"><text class="addressEdit-list-submit-btn">确认修改</text></div>
		<selectBox v-if="isShowSelect" :selectData="selectData" :LocalData="LocalData" :requests="requests" :params="params" :selectTitle="selectTitle" :selectValue="selectValue" @completesEelect="completesEelect" @cencleSelect="cencleSelect" ></selectBox>
	</div>
</template>
<script>
	import myNavbar from "../../../../components/myNavbar/myNavbar.vue";
	import selectBox from './components/selectBox.vue'
	import {
		find,
		update
	} from '../../../../api/member.js'
	const storage = weex.requireModule('storage')
	export default {
		name: '',
		data() {
			return {
				memberInfo:{},
				id: '',
				isShowSelect: false,
				selectTitle: '',
				selectValue: '',
				requests: '',
				params: '',
				LocalData: false,
				promoterName: '',
				selectData: []
			}
		},
		created() { // 在实例创建完成后被立即调用
			this.id = app.config.params
			this.loadMember()
		},
		methods: {
			loadMember(){
				find(this.id).then(res=>{
					this.memberInfo=res.data.member
					this.promoterName = res.data.promoterName
					if(this.isNull(res.data.member.avatar)){
						this.memberInfo.avatar = 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/avatar.png'
					}
				})
			},
			showVipSelect () {
				this.isShowSelect = true
				this.LocalData = false
				this.selectTitle = '会员等级'
				this.selectValue = this.memberInfo.vip
				this.requests = 'vip'
				this.params = 'vip'
			},
			showTypeSelect() {
				this.isShowSelect = true
				this.selectTitle = '会员类型'
				this.selectValue = this.memberInfo.memberType
				this.LocalData = true
				this.selectData = [
					{ memberType: 0, name: '个人' },
					{ memberType: 1, name: '法人企业' },
				]
				this.params = 'memberType'
			},
			completesEelect(data){
				if (data.params == 'vip') {
					this.memberInfo.vipName = data.form.name
					this.memberInfo.vip = data.form.vip
					this.isShowSelect = false
				} else if (data.params == 'memberType') {
					this.memberInfo.memberType = data.form.memberType
					this.isShowSelect = false
				}
			},
			cencleSelect () {
				this.isShowSelect = false
			},
			submit() {
				if (this.isNull(this.memberInfo.name)) {
					eeui.toast({
						message: '会员名称不能为空'
					});
				} else if (this.isNull(this.memberInfo.vip)) {
					eeui.toast({
						message: '会员等级不能为空'
					});
				} else if (this.isNull(this.memberInfo.memberType)) {
					eeui.toast({
						message: '会员类型不能为空'
					});
				} else {
					update(this.memberInfo).then(() => {
						storage.setItem('editMember', 'edit')
						eeui.closePage()
					}).catch(err => { })
				}
			}
		},
		components: {
			myNavbar,
			selectBox
		},
	}
</script>

<style scoped>
	.app {
		flex: 1;
		background-color: rgb(248, 248, 248);
	}

	.mine-list {
		margin: 20px 20px;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 16px;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(248, 248, 248, 0.3);
	}

	.mine-list-item-head {
		height: 126px;
		width: 710px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 27px;
		font-size: 28px;
		color: rgba(26, 26, 30, 1);

	}

	.mine-list-item {
		height: 82px;
		position: relative;
		font-size: 28px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 27px;
	}

	.editMember-list-item {
		padding: 0 27px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 102px;
		font-size: 28px;
		font-family: PingFangSC;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		display: flex;
		align-items: center;
		position: relative;
	}
	.bb {
		border-bottom-style: solid;
        border-bottom-width: 4px;
        border-bottom-color: rgba(128, 128, 128, 0.062);
	}

	.editMember-label {
		/* width: 140px; */
		padding-right: 30px;
		font-size: 28px;
	}

	.list-right {
		flex-direction: row;
		align-items: center;
	}

	.contact {
		font-size: 28px;
	}

	.editMember-list-item-input {
		width: 460px;
		height: 50px;
		font-size: 28px;
		text-align: right;
	}

	.title2 {
		margin-left: 10px;
		color: gray;
		font-size: 36px;
		font-family: iconfont2;
		color: #cccccc;
	}

	.addressEdit-list-submit {
		align-items: center;
		justify-content: center;
		margin: 20px 20px 0;
		width: 710px;
		display: block;
		height: 82px;
        background-color: #409EFF;
		border-radius: 16px;
	}

	.addressEdit-list-submit-btn {
		font-size: 32px;
		letter-spacing: 5px;
        color: white;
	}

	.flex{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
</style>
